<script lang="ts" setup>
import store from "@/store";
import { ref, onMounted, computed, watch } from "vue";
import { THEME_LIST, MODULE_LIST } from "@/common";
import generateXml from "@/utils/generateXml";
import XmlPreviewCode from "@/components/xmlPreviewCode/index.vue";
import XmlPreviewJson from "@/components/xmlPreviewJson/index.vue";
import { deepClone, downloadTxt, uploadingTxt, getTimeStamp } from "@/utils/utils";
import { ElMessage } from "element-plus";

// 当前主题
const currentTheme = ref(store.getters.currentTheme);
// 主题
const themeList = ref(THEME_LIST);
// 模块列表
const moduleList = computed(() => {
  return store.getters.moduleList;
});
// 历史模块列表
const historyList = computed(() => {
  return store.getters.historyList;
});
const xmlPreviewJsonRef = ref();
const xmlPreviewCodeRef = ref();
const revocationState = ref(false);

watch(moduleList.value, () => {
  if (!revocationState.value) {
    historyList.value.push(deepClone(moduleList.value));
    if (historyList.value.length > 50) {
      historyList.value.shift();
    }
  }
});

/**
 * 切换主题
 */
const changeTheme = () => {
  // 存储主题
  store.commit("setCurrentTheme", currentTheme.value);
  // 移除所有主题类
  document.body.classList.remove("theme-orange", "theme-blue", "theme-green", "theme-purple");
  // 添加当前主题类
  document.body.classList.add(currentTheme.value);
};

/**
 * 撤回
 */
const revocation = () => {
  revocationState.value = true;
  if (historyList.value.length === 1) {
    store.commit("setModuleList", deepClone(historyList.value[historyList.value.length - 1]));
  } else {
    store.commit("setModuleList", deepClone(historyList.value[historyList.value.length - 2]));
  }
  if (moduleList.value.length) {
    store.commit("setCurrentNode", moduleList.value[0]);
  } else {
    store.dispatch("clearCurrentNode");
  }
  historyList.value.pop();
  setTimeout(() => {
    revocationState.value = false;
  }, 500);
};

/**
 * 保存
 */
const save = () => {
  localStorage.setItem(MODULE_LIST, JSON.stringify(store.getters.moduleList));
  ElMessage.success("保存成功");
};

/**
 * 清空
 */
const remove = () => {
  store.commit("setModuleList", []);
  store.dispatch("clearCurrentNode");
  ElMessage.success("已清空");
};

/**
 * 下载
 */
const download = () => {
  downloadTxt(JSON.stringify(moduleList.value), "xml-json-tp-" + getTimeStamp());
  ElMessage.success("已下载");
};

/**
 * 导入
 */
const importFn = () => {
  uploadingTxt((result: string) => {
    if (result) {
      try {
        const list = JSON.parse(result);
        if (list.length && list[0].id) {
          store.commit("setModuleList", list);
          ElMessage.success("已导入");
        } else {
          ElMessage.success("内容解析错误");
        }
      } catch (e) {
        ElMessage.success("内容解析错误");
      }
    } else {
      ElMessage.success("内容解析错误");
    }
  });
};

/**
 * 预览json
 */
const previewJson = () => {
  xmlPreviewJsonRef.value.open(JSON.stringify(moduleList.value));
};

/**
 * 预览xml
 */
const previewXML = () => {
  xmlPreviewCodeRef.value.open(generateXml(moduleList.value));
};

/**
 * 预览pdf
 */
const previewPDF = () => {
  console.log("===", "previewPDF");
};

onMounted(() => {
  // 设置主题
  changeTheme();
});
</script>

<template>
  <div class="top-nav flex">
    <div class="flex flex-center">
      <i class="fas fa-code f-s-28 color-secondary"></i>
      <h1 class="f-s-24 color-white f-w-600 m-l-10">Vue XML 生成器</h1>
    </div>
    <div class="flex1"></div>
    <div class="flex flex-center color-white">
      <i class="fas fa-palette"></i>
      <span class="m-l-5">主题：</span>
      <el-select v-model="currentTheme" size="default" class="theme-select" @change="changeTheme">
        <el-option v-for="item in themeList" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </div>
    <div class="flex flex-center m-l-20">
      <el-button type="info" :disabled="historyList.length === 0" @click="revocation">
        <div class="flex flex-center">
          <i class="fas fa-arrow-left"></i>
          <span class="m-l-5">撤回</span>
        </div>
      </el-button>
      <el-button type="info" @click="save">
        <div class="flex flex-center">
          <i class="fas fa-save"></i>
          <span class="m-l-5">保存</span>
        </div>
      </el-button>
      <el-button type="warning" @click="remove">
        <div class="flex flex-center">
          <i class="fas fa-trash"></i>
          <span class="m-l-5">清空</span>
        </div>
      </el-button>
      <el-button type="success" @click="download">
        <div class="flex flex-center">
          <i class="fas fa-arrow-down"></i>
          <span class="m-l-5">下载</span>
        </div>
      </el-button>
      <el-button type="success" @click="importFn">
        <div class="flex flex-center">
          <i class="fas fa-arrow-up"></i>
          <span class="m-l-5">导入</span>
        </div>
      </el-button>
      <el-button type="success" @click="previewJson">
        <div class="flex flex-center">
          <i class="fas fa-file-text"></i>
          <span class="m-l-5">预览Json</span>
        </div>
      </el-button>
      <el-button type="success" @click="previewXML">
        <div class="flex flex-center">
          <i class="fas fa-code"></i>
          <span class="m-l-5">预览XML</span>
        </div>
      </el-button>
      <el-button type="success" @click="previewPDF">
        <div class="flex flex-center">
          <i class="fas fa-file"></i>
          <span class="m-l-5">预览PDF</span>
        </div>
      </el-button>
    </div>
    <XmlPreviewJson ref="xmlPreviewJsonRef" />
    <XmlPreviewCode ref="xmlPreviewCodeRef" />
  </div>
</template>
